import React, { useState, useMemo,useEffect } from 'react';
import { createStore } from "redux";
import { Provider, useSelector, useDispatch } from "react-redux";

import Top from '../../components/top/top'
import store from './redux'

import cityDatas from './json/city.json'

import '../../utils/common.scss'
import './index.scss'

let dispatch: any;
let storeState: any;
function App() {
  return (
    <div>
      <Provider store={store}>
        <Where />
      </Provider>
    </div>
  )
}
function Where() {
  //useSelector 获取state的数据 参数是个函数
  storeState = useSelector(state => (state as any));
  //获取redux 获取请求的dispatch
  dispatch = useDispatch();

  return (
    <div className='where_main'>
      <div className='top_back'></div>
      <div className='main_box'>
        <ComeGo />

      </div>
      {storeState.showCitySelect && (<CitySelect />)}
    </div>
  )
}
//起点终点组件
function ComeGo() {
  function exchange() {
    console.log('2')
    dispatch({ type: 'exchange' })
  }
  return (
    <ul className='come_go'>
      <li onClick={() => { dispatch({ type: 'showCitySelect', value: true, isFrom: true }) }}>{storeState.from}</li>
      <li onClick={() => { dispatch({ type: 'exchange' }) }}>→</li>
      <li>{storeState.to}</li>
    </ul>
  )
}

//城市选择
function CitySelect() {
  console.log('重新渲染了')
  let [city, setCity] = useState(storeState.from);//选择的城市
  let [cityData,setCityData] =useState({hotCities:[],cityList:[{citys:[],tilte:''}]});//城市数据
  let [navData, setNavData] = useState([]);//城市导航数据
  useEffect(() => {
    console.log('渲染次数')
    setTimeout(() => {
      setCityData((cityDatas as any));
      document.getElementsByClassName('select_main')[0].addEventListener('click',bindListen);
    }, 100);
    return () => {
    }
  },[])
  
  //数据监听 优化
  let _html = useMemo(getSelectHtml,[cityData]);
  //当city 变化才触发 更新redux操作
  useMemo(() => selectCityFun(), [city]);

  //设置 站点
  function selectCityFun() {
    dispatch({ type: 'setCity', city: city })
  }
  //绑定事件
  function bindListen(event:any){
    console.log((event as any).target.innerText);
    debugger
    setCity((event as any).target.innerText);
  }
  //生成dom
  function getSelectHtml(){
    let _html='';
    let navData=[];
    if(cityData.cityList.length>1){
      for(let ii of (cityData as any).cityList){
        _html+='<a name='+ii.title+'>'+ii.title+'</a>'
        navData.push(ii.title)
        if((ii.citys as any)&&(ii.citys as any).length>0){
          _html+=`<ul>`
          for(let jj of (ii.citys as any)){
            _html+=`<li val=${jj.name}>${jj.name}</li>`;
          }
          _html+=`</ul>`
        }
        setNavData((navData as any));
      }
    }
    return _html;
  }

  return (
    <div className='city_select'>
      <div className='city_nav'>
        {navData.map((item)=>{
          let href ='#'+item;
          return (<a href={href} key={item} onClick={()=>{}}>{item}</a>)
        })}
      </div>
      <div className='select_main' dangerouslySetInnerHTML={{ __html: _html }}>
      </div>
    </div>
  )
}


//返回了 connect 其实是一个容器组件
export default App; 